Fancy List Applet

FancyList Applet features introduction

FancyList applet designed to replace ugly HTML <select ..> element. With set of applet public methods HTML designers may add or remove list elements, handle selection events or get selected item value to pass it into form hidden fields. In other words just use it almost the same way as HTML <select ..> element can be used with JavaScript.

FancyList applet allow to configure it's colors, background images and behaviour with simple set of applet parameters.

More, it allows to display long texts, splitting it in multiple lines automatically.
Applet automatically add scrollbar when needed.

FONT

parameter include FontName,FontStyle,FintSize separated with comma. Font name can be one of platform independent fontname aliases

Dialog
Helvetica
Courier
InputDialog
TimesRoman

FontStyle is number

0 - regular
1 - bold
2 - italic
3 - bold italic

FontSize is height of the font in pixels.

Example: <param name="FONT" value="Dialog, 1, 12"> will set font "Dialog" bold, 12 pixels height.

Applet event callbacks

ONLOAD Name of JavaScript function to call when applet finished to load and is ready to operate. Calling of applet methods prior the moment when applet will call this function may cause errors, as applet may be not loaded yet.
Example: <param name="ONLOAD" value="appletReady"> will call javascript function appletReady() when applet is ready to operate. Typical usage:

 function appletReady(){
   // get applet object by name and assign to variable 
   // to make life easier
   fl = document.applets["fList"];
   // populate list with text,value pairs 
   fl.addItem("FancyList Applet introduction","intro");
   fl.addItem("Font parameter ","font");
   fl.addItem("Event callbacks","callbacks");   
   fl.addItem("Colors","colors");   
   fl.addItem("Background ","bgimage");   
 }

ONCLICK Name of Javascript function to call when selection is changed. This callback function must have parameter where to pass value of selected option.
Example: <param name="ONCLICK" value="selectionChanged"> will call javascript function selectionChanged(arg) passing option value through arg parameter of function, so for testing you may try something like this:

   function selectionChanged(arg) {
     // just for testing of passed argument
     alert(arg);
   }

Colors

Applet have 3 parameters to define colors. FGCOLOR as text color, HLCOLOR for text highlighting and SBCOLOR for scrollbar color.
Example: as colors defined in example on this page.


<param name="FGCOLOR" value="000000">

<param name="HLCOLOR" value="0000ff">

<param name="SBCOLOR" value="AEBFD3">

All colors are in hexadecimal RRGGBB format same as HTML hex colors are, but without # hexadecimal radix character.

BGIMAGE and AREA parameters

BGIMAGE parameter is URL of applet background image. Note that most browsers' JVM can handle only JPEG and noninterlaced, nonanimated GIF formats. JPEG images must be saved with compression type "Baseline Standard".

AREA parameter defines rectangular region where list will be actually drawn So designers do not need to cut whole image on pieces and use tables to fit list inside larger image. Parameter include topX,topY,width and height of rectangle region separated with commas. Scrollbar will be drawn inside this rectangle at it's right edge.
Example:


<param name="BGIMAGE" value="fancy1.jpg">

<param name="AREA"    value="30,55,140,195">

POINTER is a 14 x 14 pixels image pointing on selected item. This parameter is optional and can be omited.

Applet methods

addItem(text,value) populate list with new name/value pair
insertItem(index, text, value) insert item in the list at given position.

removeAll() remove all items from list.
removeItem(index) remove item with given index from list.

deselect() deselect item if any selected.
select(index) selects item at given index.
Note above 2 methods do not call event handler.
getSelectedIndex() return selected index or -1 if none selected.
getSelectedText() return selected item text or null if none selected.
getSelectedValue() return selected item value or null if none selected.

Example: [Try It]

<script>
 function test1(){
   // assuming applet have NAME="fList"
   fl = document.applets["fList"];
   // Insert test item at position 1 and select it
   fl.insertItem(1,"Your Test!","test");
   fl.select(1);   
 }
</script>
<a href="javascript:void(0)" 
     onClick="test1(); return false;"
     >Try It</a>

Full applet tag example

As it used on this demo page

<APPLET name="fList" CODE=fancyList2.class WIDTH=200 HEIGHT=300 MAYSCRIPT>
<param name="ONLOAD"   value="setList">
<param name="ONCLICK" value="showTab">
<param name="ONDATALOAD" value="dataLoaded">
<param name="AUTHOR" value="virtual_max (http://come.to/vmax)">
<param name="KEY"    value="Free Version">
<param name="FONT" value="Dialog, 1, 12">
<param name="FGCOLOR" value="000000">
<param name="HLCOLOR" value="0000ff">
<param name="SBCOLOR" value="AEBFD3">
<param name="BGIMAGE" value="fancy1.jpg">
<param name="AREA"    value="30,55,140,195">
<param name="POINTER" value="pointer.gif">
</APPLET>

Terms of use
This applet can be used absolutely free with KEY "Free Version", note that AUTHOUR parameter is required and can't be changed, if you will change this parameter applet wouldn't work.
Free version will open popup window with link to my site. If you want to get rid of this additional feature you must register this applet. Valid KEY will unlock the applet and switch off this popup .

Distributing or mirroring
Redistributing or mirroring of this applet download package and it's documentation on other sites, collections or other public resources without authour's explicit permission is strictly prohibited.

You are welcome to provide link to Virtual_Max's cafe where visitors will always find latest release of this applet. Reason is simple, if any bug fixes or code improvements will be added, people will always download most recent version from my site.

Additional capabilities

Applet have additional method which provide designers with ability to load text ot html data from URL and pass data to JavaScript function.
loadURL(url) method starts loading from URL and return immidiatly, so JavaScript function do not 'hang' until data will be loaded from slow connection.

informs applet that when data loaded it must be passed to specified function. As data may contain special and control characters, to prevent script from crash it is passed as URLencoded text.
Example: try it

<script>

 function myunescape(s){
   // JS unesape do not unescape '+' chars as URLencoder encode spaces
   // So first replace all '+' with  ' ' and than use normal unescape
   var inx=0;
   while((inx=s.indexOf("+",inx))>=0){
      s=s.substring(0,inx)+" "+s.substring(inx+1);
   }
   return unescape(s);
 }

 function dataLoaded(s){
   myunescape(s);
   alert(s);
 }

</script>
<APPLET name="fList" CODE=fancyList2.class WIDTH=200 HEIGHT=300 MAYSCRIPT>
  ....
<param name="ONDATALOAD" value="dataLoaded">
  ....
</APPLET>
<a href="javascript:void(0);" 
      onClick="document.applets['fList'].loadURL('test.txt');
      ">try it</a>

FAQs

Not yet, sorry..

Special characters and HTTP entities.

First of all \n can be used to force line split on desired place. Applet support both symbolicand numeric entities encodings. So special characters can be encoded as &#xxx; where xxx is decimal character code or with any of supported symbolic values listed in table below.

"	"
&	&
<	<
>	>
®	®
©	©
À	À
Á	Á
â	â
Ã	Ã
ä	ä
å	å
æ	æ
Ç	Ç
È	È
É	É
ê	ê
ë	ë
Ì	Ì
Í	Í
î	î
ï	ï
Ñ	Ñ
Ò	Ò
Ó	Ó
ô	ô
Õ	Õ
ö	ö
Ø	Ø
Ù	Ù
Ú	Ú
û	û
ü	ü
ß	ß
à	à
á	á
â	â
ã	ã
ä	ä
å	å
æ	æ
ç	ç
è	è
é	é
ê	ê
ë	ë
ì	ì
í	í
î	î
ï	ï
ñ	ñ
ò	ò
ó	ó
ô	ô
õ	õ
ö	ö
ø	ø
ù	ù
ú	ú
û	û
ü	ü
ÿ	ÿ